<template>
<div>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col :span="6">
      <h2>凉薄的权限管理系统</h2>
      <el-image :src="require('@/assets/lv.jpg')"></el-image>
      <p>作者：凉薄</p>
      <p>作者邮箱：lvshihao260@qq.com</p>
    </el-col>
    <el-col :span="1"> <el-divider direction="vertical"></el-divider></el-col>
    <el-col :span="6">
      <el-form ref="loginForm" :rules="rules" :model="loginform" class="loginForm" label-position="left" label-width="80px">
        <h3 class="loginTitle">用户登录</h3>
        <el-form-item label="用户名" prop="username" required>
          <el-input type="text" v-model="loginform.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
          <el-input type="password" placeholder="密码" v-model="loginform.password"></el-input>
        </el-form-item>


        <el-form-item label="验证码" prop="captcha" required>
          <el-input type="text" v-model="loginform.captcha" placeholder="点击图片更换验证码"></el-input>

        </el-form-item>
        <el-form-item>
          <img :src="captchaUrl" class="captcha" @click="getCaptcha">
        </el-form-item>
        <el-checkbox class="remember" v-model="remember">记住我</el-checkbox><br>
        <el-button type="primary" style="width: 100%" @click="submitForm()">登录</el-button>
      </el-form>
    </el-col>
  </el-row>
</div>
</template>

<script>

import qs from 'qs'



export default {
  name: "Login",
  data() {
    return {
      captchaUrl: "",
      loginform: {
        username: "lv",
        password: "qq260778",
        captcha: "",
        uuid: "",
      },
      remember: true,
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
        captcha: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.getCaptcha();
  },
  methods:{
    submitForm(){
      this.$refs["loginForm"].validate((valid)=>{
        if(valid){
          this.$axios.post("/api/login?"+qs.stringify(this.loginform)).then((resp)=>{
            const token=resp.headers['authorization']
            this.$store.commit('SET_TOKEN',token);
            this.$router.push("/index")
          })
        }else{
          this.$message.error("请输入完整的信息")
          return false;
        }
      })
    },
    getCaptcha(){
      this.$axios.get("/api/getCaptcha").then((res)=>{
        this.loginform.uuid=res.data.uuid;
        this.captchaUrl=res.data.data;
      })
    }
  }
}
</script>

<style scoped>
.loginForm{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow:0 0 25px #cac6c6;
}
.loginTitle{
  margin: 0 auto 40px auto;
  text-align: center;
}
.remember{
  text-align: left;
  margin:0 auto 20px auto;
}
.el-divider{
  height: 500px;
}
.el-row{
  background-color: #cac6c6;
  height: 100vh;
  display: flex;
  align-items: center;
}
.el-image{
  margin-top: 8px;
  margin-bottom: 8px;
  width: 238px;
  height: 317px;
}
</style>